<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线下实践详情</title>
    <style>
        /* --- Global Layout & Variables (Consistent with other pages) --- */
        :root {
            --sidebar-width: 240px;
            --primary-color: #007bff;
            --secondary-color: #6c757d;
            --border-color: #dee2e6;
            --light-gray: #f8f9fa;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f4f5f7;
            margin: 0;
            color: #333;
        }
        /* --- Core Layout Fix --- */
        .main-content {
            margin-left: var(--sidebar-width); /* Fixes overlap with sidebar */
            padding: 30px;
        }
        .container-card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 25px 40px;
        }
        /* --- Page Header & Actions --- */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }
        .page-header h1 {
            margin: 0;
            font-size: 1.8em;
            color: #333;
        }
        /* --- Detail Section Styling --- */
        .details-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px 30px; /* row-gap column-gap */
            margin-bottom: 30px;
            padding: 20px;
            background-color: var(--light-gray);
            border-radius: 8px;
        }
        .detail-item {
            font-size: 1.05em;
            color: #495057;
        }
        .detail-item strong {
            font-weight: 600;
            color: #343a40;
            margin-right: 8px;
        }

        .section-header {
            font-size: 1.3em;
            color: #333;
            margin: 30px 0 15px 0;
        }

        .detail-content {
            white-space: pre-wrap; /* Preserves line breaks and spaces */
            background-color: #fff;
            padding: 20px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            line-height: 1.7;
            font-size: 1.1em;
            color: #212529;
        }
        /* --- Button Styles --- */
        .btn {
            display: inline-block;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            border: 1px solid transparent;
            padding: 10px 20px;
            font-size: 1em;
            border-radius: 4px;
            transition: all 0.2s ease-in-out;
            text-decoration: none;
        }
        .btn-secondary {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
            color: #fff;
        }
        .btn-secondary:hover {
            filter: brightness(90%);
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
    <div class="container-card" th:if="${practice}">
        <div class="page-header">
            <h1 th:text="${practice.title}"></h1>
            <a th:href="@{/practice/manage}" class="btn btn-secondary">返回管理列表</a>
        </div>

        <div class="details-grid">
            <div class="detail-item">
                <strong>实践ID:</strong>
                <span th:text="${practice.id}"></span>
            </div>
            <div class="detail-item">
                <strong>所属课程:</strong>
                <span th:text="${practice.courseName}"></span>
            </div>
            <div class="detail-item">
                <strong>实践状态:</strong>
                <span th:text="${practice.status}"></span>
            </div>
            <div class="detail-item">
                <strong>实践时间:</strong>
                <span th:text="${#temporals.format(practice.practiceTime, 'yyyy-MM-dd HH:mm')}"></span>
            </div>
            <div class="detail-item">
                <strong>创建时间:</strong>
                <span th:text="${#temporals.format(practice.createTime, 'yyyy-MM-dd HH:mm')}"></span>
            </div>
        </div>

        <h3 class="section-header">任务内容</h3>
        <div class="detail-content" th:text="${practice.content}"></div>

    </div>
</div>
</body>
</html>